<template>
  <div class="settings-container">
    <div class="page-header">
      <h2>系统设置</h2>
    </div>

    <el-tabs v-model="activeTab" class="settings-tabs">
      <!-- 基本设置 -->
      <el-tab-pane label="基本设置" name="basic">
        <el-card>
          <el-form :model="basicSettings" label-width="120px" class="settings-form">
            <el-form-item label="系统名称">
              <el-input v-model="basicSettings.systemName" placeholder="请输入系统名称" />
            </el-form-item>
            
            <el-form-item label="系统描述">
              <el-input
                v-model="basicSettings.systemDescription"
                type="textarea"
                :rows="3"
                placeholder="请输入系统描述"
              />
            </el-form-item>
            
            <el-form-item label="系统Logo">
              <el-upload
                class="logo-uploader"
                action="#"
                :show-file-list="false"
                :before-upload="beforeLogoUpload"
              >
                <img v-if="basicSettings.logoUrl" :src="basicSettings.logoUrl" class="logo" />
                <el-icon v-else class="logo-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
            
            <el-form-item label="联系邮箱">
              <el-input v-model="basicSettings.contactEmail" placeholder="请输入联系邮箱" />
            </el-form-item>
            
            <el-form-item label="联系电话">
              <el-input v-model="basicSettings.contactPhone" placeholder="请输入联系电话" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveBasicSettings">保存设置</el-button>
              <el-button @click="resetBasicSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 考试设置 -->
      <el-tab-pane label="考试设置" name="exam">
        <el-card>
          <el-form :model="examSettings" label-width="120px" class="settings-form">
            <el-form-item label="默认考试时长">
              <el-input-number
                v-model="examSettings.defaultDuration"
                :min="1"
                :max="300"
                controls-position="right"
              />
              <span class="unit">分钟</span>
            </el-form-item>
            
            <el-form-item label="允许重考">
              <el-switch v-model="examSettings.allowRetake" />
            </el-form-item>
            
            <el-form-item label="最大重考次数" v-if="examSettings.allowRetake">
              <el-input-number
                v-model="examSettings.maxRetakeCount"
                :min="1"
                :max="10"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="自动提交">
              <el-switch v-model="examSettings.autoSubmit" />
            </el-form-item>
            
            <el-form-item label="显示答案">
              <el-switch v-model="examSettings.showAnswer" />
            </el-form-item>
            
            <el-form-item label="显示解析">
              <el-switch v-model="examSettings.showExplanation" />
            </el-form-item>
            
            <el-form-item label="及格分数">
              <el-input-number
                v-model="examSettings.passingScore"
                :min="0"
                :max="100"
                controls-position="right"
              />
              <span class="unit">分</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveExamSettings">保存设置</el-button>
              <el-button @click="resetExamSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 安全设置 -->
      <el-tab-pane label="安全设置" name="security">
        <el-card>
          <el-form :model="securitySettings" label-width="120px" class="settings-form">
            <el-form-item label="密码最小长度">
              <el-input-number
                v-model="securitySettings.minPasswordLength"
                :min="6"
                :max="20"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="密码复杂度">
              <el-checkbox-group v-model="securitySettings.passwordComplexity">
                <el-checkbox label="uppercase">包含大写字母</el-checkbox>
                <el-checkbox label="lowercase">包含小写字母</el-checkbox>
                <el-checkbox label="number">包含数字</el-checkbox>
                <el-checkbox label="special">包含特殊字符</el-checkbox>
              </el-checkbox-group>
            </el-form-item>
            
            <el-form-item label="登录失败锁定">
              <el-switch v-model="securitySettings.loginLockEnabled" />
            </el-form-item>
            
            <el-form-item label="最大失败次数" v-if="securitySettings.loginLockEnabled">
              <el-input-number
                v-model="securitySettings.maxLoginAttempts"
                :min="3"
                :max="10"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="锁定时长" v-if="securitySettings.loginLockEnabled">
              <el-input-number
                v-model="securitySettings.lockDuration"
                :min="5"
                :max="60"
                controls-position="right"
              />
              <span class="unit">分钟</span>
            </el-form-item>
            
            <el-form-item label="会话超时">
              <el-input-number
                v-model="securitySettings.sessionTimeout"
                :min="30"
                :max="480"
                controls-position="right"
              />
              <span class="unit">分钟</span>
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveSecuritySettings">保存设置</el-button>
              <el-button @click="resetSecuritySettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>

      <!-- 邮件设置 -->
      <el-tab-pane label="邮件设置" name="email">
        <el-card>
          <el-form :model="emailSettings" label-width="120px" class="settings-form">
            <el-form-item label="SMTP服务器">
              <el-input v-model="emailSettings.smtpHost" placeholder="请输入SMTP服务器地址" />
            </el-form-item>
            
            <el-form-item label="SMTP端口">
              <el-input-number
                v-model="emailSettings.smtpPort"
                :min="1"
                :max="65535"
                controls-position="right"
              />
            </el-form-item>
            
            <el-form-item label="发件人邮箱">
              <el-input v-model="emailSettings.senderEmail" placeholder="请输入发件人邮箱" />
            </el-form-item>
            
            <el-form-item label="发件人密码">
              <el-input
                v-model="emailSettings.senderPassword"
                type="password"
                placeholder="请输入发件人密码"
                show-password
              />
            </el-form-item>
            
            <el-form-item label="启用SSL">
              <el-switch v-model="emailSettings.enableSSL" />
            </el-form-item>
            
            <el-form-item>
              <el-button type="primary" @click="saveEmailSettings">保存设置</el-button>
              <el-button @click="testEmailSettings">测试连接</el-button>
              <el-button @click="resetEmailSettings">重置</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'

const activeTab = ref('basic')

// 基本设置
const basicSettings = reactive({
  systemName: '在线考试系统',
  systemDescription: '专业的在线考试管理平台',
  logoUrl: '',
  contactEmail: 'admin@example.com',
  contactPhone: '400-123-4567'
})

// 考试设置
const examSettings = reactive({
  defaultDuration: 120,
  allowRetake: false,
  maxRetakeCount: 3,
  autoSubmit: true,
  showAnswer: true,
  showExplanation: true,
  passingScore: 60
})

// 安全设置
const securitySettings = reactive({
  minPasswordLength: 8,
  passwordComplexity: ['lowercase', 'number'],
  loginLockEnabled: true,
  maxLoginAttempts: 5,
  lockDuration: 15,
  sessionTimeout: 120
})

// 邮件设置
const emailSettings = reactive({
  smtpHost: 'smtp.example.com',
  smtpPort: 587,
  senderEmail: 'noreply@example.com',
  senderPassword: '',
  enableSSL: true
})

// Logo上传前验证
const beforeLogoUpload = (file) => {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
  const isLt2M = file.size / 1024 / 1024 < 2

  if (!isJPG) {
    ElMessage.error('Logo只能是 JPG/PNG 格式!')
  }
  if (!isLt2M) {
    ElMessage.error('Logo大小不能超过 2MB!')
  }
  return isJPG && isLt2M
}

// 保存基本设置
const saveBasicSettings = async () => {
  try {
    // 模拟API调用
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success('基本设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

// 重置基本设置
const resetBasicSettings = () => {
  ElMessageBox.confirm('确定要重置基本设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Object.assign(basicSettings, {
      systemName: '在线考试系统',
      systemDescription: '专业的在线考试管理平台',
      logoUrl: '',
      contactEmail: 'admin@example.com',
      contactPhone: '400-123-4567'
    })
    ElMessage.success('基本设置已重置')
  })
}

// 保存考试设置
const saveExamSettings = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success('考试设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

// 重置考试设置
const resetExamSettings = () => {
  ElMessageBox.confirm('确定要重置考试设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Object.assign(examSettings, {
      defaultDuration: 120,
      allowRetake: false,
      maxRetakeCount: 3,
      autoSubmit: true,
      showAnswer: true,
      showExplanation: true,
      passingScore: 60
    })
    ElMessage.success('考试设置已重置')
  })
}

// 保存安全设置
const saveSecuritySettings = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success('安全设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

// 重置安全设置
const resetSecuritySettings = () => {
  ElMessageBox.confirm('确定要重置安全设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Object.assign(securitySettings, {
      minPasswordLength: 8,
      passwordComplexity: ['lowercase', 'number'],
      loginLockEnabled: true,
      maxLoginAttempts: 5,
      lockDuration: 15,
      sessionTimeout: 120
    })
    ElMessage.success('安全设置已重置')
  })
}

// 保存邮件设置
const saveEmailSettings = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 500))
    ElMessage.success('邮件设置保存成功')
  } catch (error) {
    ElMessage.error('保存失败，请重试')
  }
}

// 测试邮件设置
const testEmailSettings = async () => {
  try {
    await new Promise(resolve => setTimeout(resolve, 1000))
    ElMessage.success('邮件服务器连接成功')
  } catch (error) {
    ElMessage.error('邮件服务器连接失败')
  }
}

// 重置邮件设置
const resetEmailSettings = () => {
  ElMessageBox.confirm('确定要重置邮件设置吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    Object.assign(emailSettings, {
      smtpHost: 'smtp.example.com',
      smtpPort: 587,
      senderEmail: 'noreply@example.com',
      senderPassword: '',
      enableSSL: true
    })
    ElMessage.success('邮件设置已重置')
  })
}

// 加载设置数据
const loadSettings = async () => {
  try {
    // 模拟API调用加载设置数据
    await new Promise(resolve => setTimeout(resolve, 500))
  } catch (error) {
    ElMessage.error('加载设置失败')
  }
}

onMounted(() => {
  loadSettings()
})
</script>

<style scoped>
.settings-container {
  padding: 20px;
}

.page-header {
  margin-bottom: 20px;
}

.page-header h2 {
  margin: 0;
  color: #303133;
}

.settings-tabs {
  background: white;
}

.settings-form {
  max-width: 600px;
}

.unit {
  margin-left: 8px;
  color: #909399;
  font-size: 14px;
}

.logo-uploader .logo {
  width: 100px;
  height: 100px;
  display: block;
  object-fit: cover;
  border-radius: 4px;
}

.logo-uploader .logo-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  cursor: pointer;
  transition: border-color 0.3s;
}

.logo-uploader .logo-uploader-icon:hover {
  border-color: #409eff;
}

:deep(.el-tabs__content) {
  padding-top: 20px;
}

:deep(.el-checkbox-group) {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

:deep(.el-form-item__content) {
  display: flex;
  align-items: center;
}
</style>